<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD Generator - 代码生成器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="/css/common.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
        }
        
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 120px 0;
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="1" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            background: linear-gradient(45deg, #ffffff, #e0e7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero-subtitle {
            font-size: 1.25rem;
            font-weight: 300;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        
        .cta-button {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            border: none;
            padding: 15px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
        }
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(255, 107, 107, 0.4);
        }
        
        .feature-section {
            padding: 100px 0;
            background: #f8fafc;
        }
        
        .feature-card {
            background: white;
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            height: 100%;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2rem;
            color: white;
        }
        
        .feature-icon.icon-1 { background: linear-gradient(45deg, #667eea, #764ba2); }
        .feature-icon.icon-2 { background: linear-gradient(45deg, #f093fb, #f5576c); }
        .feature-icon.icon-3 { background: linear-gradient(45deg, #4facfe, #00f2fe); }
        .feature-icon.icon-4 { background: linear-gradient(45deg, #43e97b, #38f9d7); }
        .feature-icon.icon-5 { background: linear-gradient(45deg, #fa709a, #fee140); }
        .feature-icon.icon-6 { background: linear-gradient(45deg, #a8edea, #fed6e3); }
        
        .feature-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #2d3748;
        }
        
        .feature-description {
            color: #718096;
            line-height: 1.6;
        }
        
        .tech-section {
            padding: 80px 0;
            background: white;
        }
        
        .tech-badge {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            margin: 8px;
            display: inline-block;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .tech-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }
        
        .quick-start-section {
            padding: 80px 0;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        
        .step-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .step-number {
            width: 50px;
            height: 50px;
            background: white;
            color: #f5576c;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.5rem;
            margin: 0 auto 20px;
        }
        
        .stats-section {
            padding: 60px 0;
            background: #2d3748;
            color: white;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: #667eea;
            display: block;
        }
        
        .stat-label {
            font-size: 1.1rem;
            opacity: 0.8;
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
        }
        
        .nav-link {
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .nav-link:hover {
            color: #667eea !important;
        }
        
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .fade-in-up.animate {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div th:replace="fragments/navigation :: navbar"></div>

    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="hero-content fade-in-up">
                        <h1 class="hero-title">CRUD Generator</h1>
                        <p class="hero-subtitle">基于SQL自动生成CRUD接口的智能代码生成平台</p>
                        <div class="d-flex gap-3 flex-wrap">
                            <a href="/generator" class="btn btn-light cta-button text-white">
                                <i class="bi bi-play-fill me-2"></i>
                                立即开始
                            </a>

                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="text-center fade-in-up" style="animation-delay: 0.3s;">
                        <div style="font-size: 15rem; color: rgba(255,255,255,0.1);">
                            <i class="bi bi-cpu"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 统计数据 -->
    <section class="stats-section">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-6 mb-4">
                    <div class="stat-item fade-in-up">
                        <span class="stat-number" data-count="1000">0</span>
                        <div class="stat-label">代码生成次数</div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-4">
                    <div class="stat-item fade-in-up" style="animation-delay: 0.1s;">
                        <span class="stat-number" data-count="50">0</span>
                        <div class="stat-label">支持的数据类型</div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-4">
                    <div class="stat-item fade-in-up" style="animation-delay: 0.2s;">
                        <span class="stat-number" data-count="99">0</span>
                        <div class="stat-label">代码准确率 %</div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-4">
                    <div class="stat-item fade-in-up" style="animation-delay: 0.3s;">
                        <span class="stat-number" data-count="24">0</span>
                        <div class="stat-label">7x24 服务</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能特性 -->
    <section class="feature-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold mb-3 fade-in-up">核心功能特性</h2>
                <p class="lead text-muted fade-in-up" style="animation-delay: 0.1s;">
                    强大的功能集合，让应用开发变得简单高效
                </p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in-up" style="animation-delay: 0.1s;">
                        <div class="feature-icon icon-1">
                            <i class="bi bi-search"></i>
                        </div>
                        <h4 class="feature-title">智能SQL解析</h4>
                        <p class="feature-description">
                            支持复杂的CREATE TABLE语句解析，自动识别字段类型、约束条件和索引信息，
                            智能映射数据库类型到Java类型
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in-up" style="animation-delay: 0.2s;">
                        <div class="feature-icon icon-2">
                            <i class="bi bi-code-slash"></i>
                        </div>
                        <h4 class="feature-title">代码自动生成</h4>
                        <p class="feature-description">
                            一键生成完整的Spring Boot项目结构，包括Entity、Repository、Service、
                            Controller层代码，遵循最佳实践和设计模式
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in-up" style="animation-delay: 0.3s;">
                        <div class="feature-icon icon-3">
                            <i class="bi bi-diagram-3"></i>
                        </div>
                        <h4 class="feature-title">数据库集成</h4>
                        <p class="feature-description">
                            深度集成MySQL数据库，自动生成数据访问层代码，
                            实现高效的数据存储和查询功能
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in-up" style="animation-delay: 0.4s;">
                        <div class="feature-icon icon-4">
                            <i class="bi bi-api"></i>
                        </div>
                        <h4 class="feature-title">RESTful API</h4>
                        <p class="feature-description">
                            自动生成标准的RESTful API接口，支持CRUD操作、分页查询、
                            数据验证和异常处理机制
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in-up" style="animation-delay: 0.5s;">
                        <div class="feature-icon icon-5">
                            <i class="bi bi-shield-check"></i>
                        </div>
                        <h4 class="feature-title">数据验证</h4>
                        <p class="feature-description">
                            内置数据完整性验证机制，支持字段级别的验证规则，
                            确保数据质量和业务逻辑的正确性
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card fade-in-up" style="animation-delay: 0.6s;">
                        <div class="feature-icon icon-6">
                            <i class="bi bi-gear"></i>
                        </div>
                        <h4 class="feature-title">模板可配置</h4>
                        <p class="feature-description">
                            基于FreeMarker模板引擎，支持自定义代码模板，
                            灵活配置生成规则，满足不同项目需求
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术栈 -->
    <section class="tech-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold mb-3 fade-in-up">技术栈</h2>
                <p class="lead text-muted fade-in-up" style="animation-delay: 0.1s;">
                    基于现代化的技术栈构建，保证系统的稳定性和可扩展性
                </p>
            </div>
            <div class="text-center fade-in-up" style="animation-delay: 0.2s;">
                <div class="tech-badge">
                    <i class="bi bi-cup-hot me-2"></i>
                    Spring Boot 3.x
                </div>
                <div class="tech-badge">
                    <i class="bi bi-database me-2"></i>
                    MySQL 8.0
                </div>

                <div class="tech-badge">
                    <i class="bi bi-code-square me-2"></i>
                    JSqlParser
                </div>
                <div class="tech-badge">
                    <i class="bi bi-file-earmark-code me-2"></i>
                    FreeMarker
                </div>
                <div class="tech-badge">
                    <i class="bi bi-bootstrap me-2"></i>
                    Bootstrap 5
                </div>
                <div class="tech-badge">
                    <i class="bi bi-filetype-js me-2"></i>
                    JavaScript ES6+
                </div>
                <div class="tech-badge">
                    <i class="bi bi-git me-2"></i>
                    Maven
                </div>
            </div>
        </div>
    </section>

    <!-- 快速开始 -->
    <section class="quick-start-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold mb-3 fade-in-up">快速开始</h2>
                <p class="lead fade-in-up" style="animation-delay: 0.1s;">
                    三步即可生成完整的CRUD应用
                </p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="step-card fade-in-up" style="animation-delay: 0.1s;">
                        <div class="step-number">1</div>
                        <h4 class="mb-3">编写SQL DDL</h4>
                        <p>
                            编写标准的CREATE TABLE语句，定义你的数据表结构，
                            支持各种数据类型和约束条件
                        </p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="step-card fade-in-up" style="animation-delay: 0.2s;">
                        <div class="step-number">2</div>
                        <h4 class="mb-3">一键生成代码</h4>
                        <p>
                            点击生成按钮，系统自动解析SQL语句，
                            生成完整的Spring Boot项目代码
                        </p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="step-card fade-in-up" style="animation-delay: 0.3s;">
                        <div class="step-number">3</div>
                        <h4 class="mb-3">部署运行</h4>
                        <p>
                            下载生成的代码包，配置数据库连接，
                            即可运行完整的CRUD应用
                        </p>
                    </div>
                </div>
            </div>
            <div class="text-center mt-5">
                <a href="/generator" class="btn btn-light btn-lg cta-button">
                    <i class="bi bi-rocket-takeoff me-2"></i>
                    立即体验
                </a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <h5 class="mb-3">
                        <i class="bi bi-code-square me-2" style="color: #667eea;"></i>
                        CRUD Generator
                    </h5>
                    <p class="text-muted">
                        专业的代码生成工具，让应用开发变得简单高效。
                        基于现代化技术栈，提供完整的解决方案。
                    </p>
                    <div class="d-flex gap-3">
                        <a href="#" class="text-muted">
                            <i class="bi bi-github fs-5"></i>
                        </a>
                        <a href="#" class="text-muted">
                            <i class="bi bi-twitter fs-5"></i>
                        </a>
                        <a href="#" class="text-muted">
                            <i class="bi bi-linkedin fs-5"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h6 class="mb-3">产品</h6>
                    <ul class="list-unstyled">
                        <li><a href="/generator" class="text-muted text-decoration-none">代码生成器</a></li>
                        <li><a href="/api/docs" class="text-muted text-decoration-none">API文档</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h6 class="mb-3">资源</h6>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted text-decoration-none">使用指南</a></li>
                        <li><a href="#" class="text-muted text-decoration-none">最佳实践</a></li>
                        <li><a href="#" class="text-muted text-decoration-none">常见问题</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h6 class="mb-3">支持</h6>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted text-decoration-none">技术支持</a></li>
                        <li><a href="#" class="text-muted text-decoration-none">社区论坛</a></li>
                        <li><a href="#" class="text-muted text-decoration-none">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h6 class="mb-3">关于</h6>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted text-decoration-none">关于我们</a></li>
                        <li><a href="#" class="text-muted text-decoration-none">隐私政策</a></li>
                        <li><a href="#" class="text-muted text-decoration-none">服务条款</a></li>
                    </ul>
                </div>
            </div>
            <hr class="my-4">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <p class="text-muted mb-0">
                        © 2024 CRUD Generator. All rights reserved.
                    </p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="text-muted mb-0">
                        Made with <i class="bi bi-heart-fill text-danger"></i> for developers
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            // 添加滚动监听，实现元素进入视口时的动画
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate');
                    }
                });
            }, observerOptions);

            // 观察所有需要动画的元素
            document.querySelectorAll('.fade-in-up').forEach(el => {
                observer.observe(el);
            });

            // 数字计数动画
            function animateCounter(element) {
                const target = parseInt(element.getAttribute('data-count'));
                const duration = 2000;
                const step = target / (duration / 16);
                let current = 0;

                const timer = setInterval(() => {
                    current += step;
                    if (current >= target) {
                        current = target;
                        clearInterval(timer);
                    }
                    element.textContent = Math.floor(current);
                }, 16);
            }

            // 当统计数据区域进入视口时开始计数动画
            const statsObserver = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const counters = entry.target.querySelectorAll('[data-count]');
                        counters.forEach(counter => {
                            animateCounter(counter);
                        });
                        statsObserver.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.5 });

            const statsSection = document.querySelector('.stats-section');
            if (statsSection) {
                statsObserver.observe(statsSection);
            }

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });

            // 导航栏滚动效果
            let lastScrollTop = 0;
            const navbar = document.querySelector('.navbar');
            
            window.addEventListener('scroll', function() {
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                
                if (scrollTop > 100) {
                    navbar.classList.add('shadow-lg');
                } else {
                    navbar.classList.remove('shadow-lg');
                }
                
                lastScrollTop = scrollTop;
            });
        });
    </script>
</body>
</html>